<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="header">
            <text class="state-text" v-if="data.IsSettlement == 1">已结算完成</text>
            <text class="state-text" v-if="data.IsSettlement == 2">结算未完成</text>
            <text class="state-text" v-if="data.IsSettlement == 3">未结算</text>
        </view>
        <view class="main">
            <view class="info card-item">
                <text class="type" :class="{ typeblock: data.BillType == '销售出库单' }">{{ data.BillType }}</text>
                <text>单据编号：{{ data.BillCode }}</text>
                <text>单据时间：{{ data.BillDate }}</text>
            </view>
            <view class="card-item price-item">
                <view class="item">
                    <text class="label">单据金额</text>
                    <text class="value">{{ data.Total }}</text>
                </view>
                <view class="item">
                    <text class="label">优惠金额</text>
                    <text class="value">{{ data.Preferential }}</text>
                </view>
                <view class="item">
                    <text class="label">结算金额</text>
                    <text class="value">{{ data.SettlementTotal }}</text>
                </view>
                <view class="item">
                    <text class="label label1">是否结算</text>
                    <text class="value value1" v-if="data.IsSettlement == 1">已结算完成</text>
                    <text class="value value2" v-if="data.IsSettlement == 2">结算未完成</text>
                    <text class="value value3" v-if="data.IsSettlement == 3">未结算</text>
                </view>
            </view>
            <view class="pro-items card-item">
                <view class="order-detail-item" v-for="item in data.BillDetailList">
                    <image
                        class="product-img"
                        v-if="!getAppSet().isHideImg"
                        mode="aspectFit"
                        :src="item.ProductImg ? easyGetImgUrl(item.ProductImg) : '/static/img/no-img.jpg'"></image>
                    <view class="product-info">
                        <text class="product-name">{{ item.ProductName }}</text>
                        <text class="product-desc" v-if="item.Attribute">{{ item.Attribute }}</text>
                        <view class="product-bottom">
                            <text class="product-price">￥{{ item.Price }}</text>
                            <text class="product-num"
                                >x{{ item.Amount }}{{ item.UnitName ? item.UnitName : item.RationUnit }}</text
                            >
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import reconciliaItem from "@/pages_me/components/reconcilia/reconcilia-item.vue"
export default {
    components: {
        reconciliaItem,
    },
    data() {
        return {
            config: {
                title: "对账单详情",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            data: {},
        }
    },
    onLoad(e) {
        this.data = JSON.parse(decodeURIComponent(e.data))
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {},
    methods: {},
}
</script>

<style lang="scss">
.header {
    height: 160rpx;
    display: flex;
    flex-direction: row;
    background: $app-color-main;
    padding: $app-page-padding;
    flex-wrap: wrap;
    justify-content: space-between;
    flex: 1;
    .state-text {
        font-weight: 700;
        font-size: $font-size-36;
        color: $color-white;
    }
}

.main {
    padding: $app-page-padding;
    background: $uni-bg-color-grey;
    border-radius: 40rpx 40rpx 0 0;
    margin-top: -40rpx;
    .info {
        display: flex;
        flex-direction: column;
        padding: $app-page-padding;
        margin-top: -80rpx;
        text {
            margin-bottom: 10rpx;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .price-item {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: $app-page-padding;
        .item {
            display: flex;
            flex-direction: row;
            flex: 1;
            height: 48rpx;
            align-items: center;
            margin-bottom: 30rpx;
            &:last-child {
                margin-bottom: 0;
            }
            .value {
                display: flex;
                flex: 1;
                justify-content: flex-end;
                font-size: 32rpx;
                font-weight: bold;
            }
            .value1 {
                font-size: 28rpx;
                color: #2e9952;
            }
            .value2 {
                font-size: 28rpx;
                color: #ff9e17;
            }
            .value3 {
                font-size: 28rpx;
                color: #ff1c1c;
            }
        }
    }
    pro-items {
    }
}
.order-detail-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 30rpx;
    padding: 10rpx;
    .product-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: $border-radius-10;
        margin-right: 15rpx;
    }
    .product-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .product-name {
            font-weight: 500;
            font-size: $font-size-26;
            color: $app-color-text-mian;
            margin-bottom: 10rpx;
        }
        .product-desc {
            font-size: $font-size-20;
            color: $app-color-text-tip;
            margin-bottom: 14rpx;
        }
        .product-bottom {
            display: flex;
            flex-direction: row;
            align-items: center;
            .product-price {
                font-size: $font-size-28;
                color: $app-color-main;
                margin-right: 10rpx;
            }
            .product-name {
                product-num: $font-size-24;
                color: $color-black;
            }
        }
    }
}
.type {
    display: flex;
    width: 145rpx;
    padding: 0 6rpx;
    height: 50rpx;
    justify-content: center;
    align-items: center;
    border-radius: 12rpx 0 12rpx 0;
    background: $color-yellow-1;
    margin-right: 20rpx;
    color: $color-white;
}
.typeblock {
    background: #000;
}
.label {
    font-size: $font-size-26;
    color: #666666;
}
.label1 {
    color: #333333;
}
</style>
